<!--
/* 业务数据管理 
 * Author:      yangjq 
 * CreateTime:  2023/12/5 20:06:17 
 * LastEditor:  yangjq 
 * ModifyTime:  2023/12/5 20:06:17 
 * Description: 
*/ 
-->
<template>
  <div class="bigBox">

    <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol">
      <a-row>

        <a-col :span="12" style="margin-bottom: 20px">
          <a-form-item label="生产数据容量">
            <a-input v-model:value="formData.produce" placeholder="请输入生产数据" suffix="Tb"></a-input>
          </a-form-item>
        </a-col>

        <a-col :span="12" style="margin-bottom: 20px">
          <a-form-item label="备份数据容量">
            <a-input v-model:value="formData.backups" placeholder="请输入备份数据" suffix="Tb"></a-input>
          </a-form-item>
        </a-col>

        <a-col :span="24" style="margin-bottom: 60px">
          <div style="padding-left: 100px">
            <a-button type="primary" @click="addhard">添加业务生产数据</a-button>

            <el-table v-if="brandList.length>0" :data="brandList"
                      style="overflow-y: auto;width: 100%;margin-bottom: 20px">

              <el-table-column align="center" label="业务类别">
                <template #default="scope">
                  <el-input @input="hardChange($event,scope.$index,'brand')" v-model="scope.row.brand"
                            :placeholder="'请输入'" style="width: 100%" />
                </template>
              </el-table-column>

              <el-table-column align="center" label="数据容量(Tb)">
                <template #default="scope">
                  <el-input-number @input="hardChange($event,scope.$index,'number')" v-model="scope.row.number"
                                   :placeholder="'请输入数据容量'" style="width: 100%" />
                </template>
              </el-table-column>

              <el-table-column align="center" label="操作">
                <template #default="scope">
                  <a @click="brandList.splice(scope.$index, 1)">删除</a>
                  <!--                    <a @click="deleteHardList(scope.$index)">删除</a>-->
                </template>
              </el-table-column>
            </el-table>

          </div>
        </a-col>

        <a-col :span="24" style="margin-bottom: 60px">
          <div style="padding-left: 100px">
            <a-button type="primary" @click="addHistory">添加生产历史数据</a-button>

            <el-table v-if="historyList.length>0" :data="historyList"
                      style="overflow-y: auto;width: 100%;margin-bottom: 20px">

              <el-table-column align="center" label="年份">
                <template #default="scope">
                  <el-input-number @input="historyChange($event,scope.$index,'year')" v-model="scope.row.year"
                            :placeholder="'请输入'" style="width: 100%" />
                </template>
              </el-table-column>

              <el-table-column align="center" label="生产数据(Tb)">
                <template #default="scope">
                  <el-input-number @input="historyChange($event,scope.$index,'produce')" v-model="scope.row.produce"
                                   :placeholder="'请输入'" style="width: 100%" />
                </template>
              </el-table-column>

              <el-table-column align="center" label="备份数据(Tb)">
                <template #default="scope">
                  <el-input-number @input="historyChange($event,scope.$index,'backups')" v-model="scope.row.backups"
                                   :placeholder="'请输入'" style="width: 100%" />
                </template>
              </el-table-column>

              <el-table-column align="center" label="操作">
                <template #default="scope">
                  <a @click="historyList.splice(scope.$index, 1)">删除</a>
                  <!--                    <a @click="deleteHardList(scope.$index)">删除</a>-->
                </template>
              </el-table-column>
            </el-table>

          </div>
        </a-col>

        <a-col :span="20"></a-col>
        <a-col :span="4">
          <a-button type="primary" @click="submit">提交</a-button>
        </a-col>

      </a-row>
    </a-form>

  </div>
</template>

<script lang="ts" setup>
import {reactive, ref, onMounted} from "vue";
import {getValueType} from "/@/utils";
import {defHttp} from "/@/utils/http/axios";
import {useMessage} from "/@/hooks/web/useMessage";
import { queryById , saveOrUpdate} from './ScreenData.api'


const labelCol = ref<any>({xs: {span: 24}, sm: {span: 5}});
const wrapperCol = ref<any>({xs: {span: 24}, sm: {span: 16}});

const formData = reactive<Record<string, any>>({
  produce: '',
  backups: '',
});

const model = {
  id : '3',
  value: '',
};


const hardType = {number: 12, brand: '华为'}
let brandList = ref([hardType])

const historyType = {year: 2023,produce : 100, backups: 0}
let historyList = ref([historyType])

function addhard() {
  brandList.value.push({number: 0, brand: ''})
}

function addHistory() {
  historyList.value.push({year: 0,produce : 0, backups: 0})
}

function hardChange(data, index, key) {
  let arr = JSON.parse(JSON.stringify(brandList.value))
  arr[index][key] = data
  brandList.value = arr
}

function historyChange(data, index, key) {
  let arr = JSON.parse(JSON.stringify(historyList.value))
  arr[index][key] = data
  historyList.value = arr
}

const {createMessage} = useMessage();

function submit() {
  formData.brandList = brandList.value;
  historyList.value.sort((a,b)=> a.year-b.year);
  formData.historyList = historyList.value;
  model.value = JSON.stringify(formData); 
  saveOrUpdate(model, true)
    .then((res) => {
      if (res.success) {
        createMessage.success(res.message);
      } else {
        createMessage.warning(res.message);
      }
    })
    .finally(() => {
    });
}


const createdData = () => {
  queryById({id:'3'}).then((res) => {
    if (res.success) {
        console.log(res.result)
        let record = JSON.parse(res.result.value);
        if(record){
          Object.assign(formData,record);
          Object.assign(model, res.result);
          brandList.value = record.brandList?record.brandList:[];
          historyList.value = record.historyList?record.historyList:[];
          historyList.value.sort((a,b)=> a.year-b.year);
        }
      } else {
        createMessage.error(res.message);
      }
    });
};

onMounted(()=>{
    createdData();
  }
);

</script>

<style scoped>
.bigBox {
  width: 100%;
  padding: 20px;
}

.antd-modal-form {
  background-color: white;
  /*overflow-y: auto;*/
  padding: 24px 24px 24px 24px;
}
</style>
